<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./search.css">
    <script src="./search.js"></script>
</head>

<body>
    <div>
        <div class="search-box">
            <div class="text-box">
                <input type="text" id="search-input" placeholder="请输入"><span class="cancel">取消</span>
                <img class="microphone" src="../microphone.png" alt="">
            </div>
            <div id="searsh-btn-boxone" class="search-btn-box">
                <div class="search-btn-box-two">
                    <span class="search-btn">历史搜索</span>
                    <img class="trash" src="../垃圾箱.png" alt="">
                </div>
                <div id="searsh-btn-box-add" class="search-btn-box-addc"></div>
                <script>
                    var trash = document.querySelector('.trash');
                    var searshBtnBoxId = document.getElementById('searsh-btn-box-add');
                    var searchInput = document.getElementById('search-input');
                    document.onkeydown = function (e) {
                        if (e.keyCode === 13) {
                            document.getElementById('searsh-btn-boxone').style.display = 'block';
                            searshBtnBoxId.innerHTML = '';
                            searshBtnBoxId.innerHTML = searchInput.value;
                            searchInput.value = '';   
                        }
                    }
                    searchInput.onclick = function () {
                        searshBtnBoxId.addEventListener('click', function (e) {
                            if (e.keyCode === 13) {       
                                searshBtnBoxId.innerHTML = searchInput;
                                searchInput.value = '';
                            }
                        })
                    }
                    trash.onclick = function () {
                        searshBtnBoxId.innerHTML = '';
                        document.getElementById('searsh-btn-boxone').style.display = 'none';
                    }
                </script>
            </div>
            <div class="hot-search-box">
                <span class="hot-search-title">热门搜索</span>
            </div>
            <div class="hot-search-list-box">
                <div class="hot-search-list">
                    <div class="hot-search-list-item"><span id="hot-search-top1" class="hot-search-top">1 <img class="hot-search-img" src="../皇冠-one (2).png" alt=""></span><a href="">账户管理</a><span class="hot">热</span></div>
                    <div class="hot-search-list-item"><span id="hot-search-top2" class="hot-search-top">2 <img class="hot-search-img" src="../皇冠 -two.png" alt=""></span><a href="">转账汇款</a><span class="hot">热</span></div>
                    <div class="hot-search-list-item"><span id="hot-search-top3" class="hot-search-top">3 <img class="hot-search-img" src="../皇冠-three.png" alt=""></span><a href="">信用卡</a><span class="hot">热</span></div>
                    <div class="hot-search-list-item">4 <a href="" class="hot-search-span">贷款管理</a></div>
                    <div class="hot-search-list-item">5 <a href="">结售汇</a></div>
                    <div class="hot-search-list-item">6 <a href="">中银理财</a></div>
                    <div class="hot-search-list-item">7 <a href="">基金</a></div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>